<template>
  <view class="common-list cbox">
    <view
      class="com-item cbox"
      v-for="(item, idx) in list"
      :key="idx"
      @tap="goPage"
    >
      <view class="top rbox">
        <view class="wrap cbox boxf_1">
          <view
            :class="['tit', item.imgUrl.length > 0 ? 'ellips' : 'ellips2']"
            >{{ item.title }}</view
          >
          <view class="sub ellips2">{{ item.sub }}</view>
        </view>
        <image
          class="img"
          v-if="item.imgUrl.length > 0"
          :src="item.imgUrl"
        ></image>
      </view>
      <view class="bottom rbox box_space_b box_y_center">
        <view class="user rbox box_y_center">
          <view class="avatar"></view>
          <text class="name">{{ item.name }}</text>
          <text class="work">{{ item.work }}</text>
        </view>
        <view class="date">{{ item.date }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    url: {
      type: String
    },
    list: {
      type: Array,
      default: []
    }
  },
  data() {
    return {}
  },
  methods: {
    goPage() {
      wx.navigateTo({
        url: `/pages/${this.url}/${this.url}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.common-list {
  margin-top: 15rpx;
  padding: 0 32rpx;
  .com-item {
    padding: 36rpx 20rpx 28rpx;
    border-bottom: 1rpx solid #e9e9e9;
    .top {
      .wrap {
        .tit {
          font-size: 32rpx;
          line-height: 1;
          color: #404040;
        }
        .sub {
          margin-top: 10rpx;
          font-size: 24rpx;
          color: #999;
        }
      }
      .img {
        margin-left: 40rpx;
        width: 218rpx;
        height: 134rpx;
        background-color: #e9c2c2;
        border-radius: 10rpx;
      }
    }
    .bottom {
      margin-top: 10rpx;
      .user {
        .avatar {
          width: 30rpx;
          height: 30rpx;
          background-color: #e9c2c2;
          border-radius: 50%;
        }
        .work,
        .name {
          margin-left: 20rpx;
          font-size: 24rpx;
          line-height: 1;
          color: #404040;
        }
      }
      .date {
        font-size: 24rpx;
        line-height: 1;
        color: #404040;
      }
    }
  }
}
</style>